<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能问答系统管理后台</title>
    <link rel="preconnect" href="https://cdn.jsdelivr.net">
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="stylesheet" href="/css/bootstrap.min.css" onerror="this.onerror=null;this.href='https://unpkg.com/bootstrap@5.3.0/dist/css/bootstrap.min.css'">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <div class="container">
                <a class="navbar-brand" href="#">智能问答系统管理后台</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#" @click="showHome">首页</a>
                        </li>
                        <li class="nav-item" v-if="isLoggedIn">
                            <a class="nav-link" href="#" @click="showUserMgmt">用户管理</a>
                        </li>
                        <li class="nav-item" v-if="isLoggedIn">
                            <a class="nav-link" href="#" @click="showHistory">用户历史记录</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav">
                        <li class="nav-item" v-if="!isLoggedIn">
                            <a class="nav-link" href="login.html">登录</a>
                        </li>
                        <li class="nav-item" v-if="!isLoggedIn">
                            <a class="nav-link" href="#" @click="showRegister">注册</a>
                        </li>
                        <li class="nav-item" v-if="isLoggedIn">
                            <a class="nav-link" href="#" @click="logout">退出</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container mt-4">
            <!-- 登录表单 -->
            <div v-if="currentView === 'login'" class="card">
                <div class="card-header">
                    <h3>登录</h3>
                </div>
                <div class="card-body">
                    <div class="alert alert-danger" v-if="loginError">{{ loginError }}</div>
                    <form @submit.prevent="login">
                        <div class="mb-3">
                            <label for="username" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="username" v-model="loginForm.username" required>
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">密码</label>
                            <input type="password" class="form-control" id="password" v-model="loginForm.password" required>
                        </div>
                        <button type="submit" class="btn btn-primary">登录</button>
                    </form>
                </div>
            </div>

            <!-- 注册表单 -->
            <div v-if="currentView === 'register'" class="card">
                <div class="card-header">
                    <h3>注册</h3>
                </div>
                <div class="card-body">
                    <div class="alert alert-danger" v-if="registerError">{{ registerError }}</div>
                    <form @submit.prevent="register">
                        <div class="mb-3">
                            <label for="reg-username" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="reg-username" v-model="registerForm.username" required>
                        </div>
                        <div class="mb-3">
                            <label for="reg-password" class="form-label">密码</label>
                            <input type="password" class="form-control" id="reg-password" v-model="registerForm.password" required>
                        </div>
                        <button type="submit" class="btn btn-primary">注册</button>
                    </form>
                </div>
            </div>

            <!-- 问答界面 -->
            <div v-if="currentView === 'home'">
                <div class="card mb-4">
                    <div class="card-header">
                        <h3>提问</h3>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-danger" v-if="askError">{{ askError }}</div>
                        <form @submit.prevent="askQuestion">
                            <div class="mb-3">
                                <label for="question" class="form-label">请输入您的问题</label>
                                <textarea class="form-control" id="question" v-model="questionForm.question" rows="3" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary" :disabled="isLoading">
                                <span v-if="isLoading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                提交问题
                            </button>
                        </form>
                    </div>
                </div>

                <div v-if="currentAnswer" class="card">
                    <div class="card-header">
                        <h3>回答</h3>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">问题: {{ currentAnswer.question }}</h5>
                        <p class="card-text answer-text">{{ currentAnswer.answer }}</p>
                        <p class="text-muted">回答时间: {{ formatDate(currentAnswer.timestamp) }}</p>
                    </div>
                </div>
            </div>

            <!-- 用户历史记录 -->
            <div v-if="currentView === 'history'" class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h3 class="mb-0">用户历史记录</h3>
                    <div class="d-flex gap-2 toolbar-compact">
                        <input v-model="historyFilter.username" class="form-control form-control-sm" placeholder="按用户">
                        <input v-model="historyFilter.questionText" class="form-control form-control-sm" placeholder="按问题关键词">
                        <button class="btn btn-sm btn-primary" @click="loadHistory(0)">查询</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="alert alert-info" v-if="history.length === 0">
                        暂无历史记录
                    </div>
                    <div v-for="(item, index) in history" :key="index" class="card history-card mb-3">
                        <div class="card-body">
                            <h5 class="card-title">问题: {{ item.question }}</h5>
                            <p class="text-muted mb-2">用户：{{ item.username }}</p>
                            <p class="card-text">回答: {{ item.answer }}</p>
                            <p class="text-muted">时间: {{ formatDate(item.timestamp) }}</p>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mt-2" v-if="historyPage.totalPages > 1">
                        <button class="btn btn-sm btn-outline-secondary" :disabled="historyPage.number === 0" @click="historyPrev">上一页</button>
                        <div>第 {{ historyPage.number + 1 }} / {{ historyPage.totalPages }} 页（共 {{ historyPage.totalElements }} 条）</div>
                        <button class="btn btn-sm btn-outline-secondary" :disabled="historyPage.number + 1 >= historyPage.totalPages" @click="historyNext">下一页</button>
                    </div>
                </div>
            </div>

            <!-- 用户管理（仅 ADMIN 可见） -->
            <div v-if="currentView === 'users'" class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h3 class="mb-0">用户管理</h3>
                    <div class="d-flex gap-2 toolbar-compact">
                        <input v-model="userFilter.username" class="form-control form-control-sm" placeholder="按用户名">
                        <input v-model="userFilter.email" class="form-control form-control-sm" placeholder="按邮箱">
                        <select v-model="userFilter.isActive" class="form-select form-select-sm" style="width: 120px;">
                            <option :value="null">全部状态</option>
                            <option :value="true">已启用</option>
                            <option :value="false">已禁用</option>
                        </select>
                        <button class="btn btn-sm btn-primary" @click="loadUsers(0)">查询</button>
                        <button class="btn btn-sm btn-success" @click="openRegister">注册用户</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-striped">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>邮箱</th>
                                    <th>角色</th>
                                    <th>状态</th>
                                    <th style="width: 160px;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="u in users.content" :key="u.id">
                                    <td>{{ u.id }}</td>
                                    <td>{{ u.username }}</td>
                                    <td>{{ u.email }}</td>
                                    <td>{{ roleLabel(u.roles) }}</td>
                                    <td>
                                        <span class="badge" :class="u.isActive ? 'bg-success' : 'bg-secondary'">
                                            {{ u.isActive ? '启用' : '禁用' }}
                                        </span>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary me-2" @click="toggleUser(u)">
                                            {{ u.isActive ? '禁用' : '启用' }}
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary" @click="editUser(u)">编辑</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mt-2" v-if="users.totalPages > 0">
                        <button class="btn btn-sm btn-outline-secondary" :disabled="users.number === 0" @click="loadUsers(users.number - 1)">上一页</button>
                        <div>第 {{ users.number + 1 }} / {{ users.totalPages }} 页（共 {{ users.totalElements || 0 }} 条）</div>
                        <button class="btn btn-sm btn-outline-secondary" :disabled="users.number + 1 >= users.totalPages" @click="loadUsers(users.number + 1)">下一页</button>
                    </div>
                </div>
            </div>

            <!-- 编辑用户弹窗 -->
            <div v-if="editDialog.visible" class="modal fade show" style="display:block; background: rgba(0,0,0,0.35);">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">编辑用户</h5>
                            <button type="button" class="btn-close" @click="closeEdit"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">ID</label>
                                <input class="form-control" v-model="editDialog.form.id" disabled>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">用户名</label>
                                <input class="form-control" v-model="editDialog.form.username">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">邮箱</label>
                                <input class="form-control" v-model="editDialog.form.email">
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="editActive" v-model="editDialog.form.isActive">
                                <label class="form-check-label" for="editActive">启用</label>
                            </div>
                            <div class="text-danger mt-2" v-if="editDialog.error">{{ editDialog.error }}</div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" @click="closeEdit">取消</button>
                            <button type="button" class="btn btn-primary" :disabled="editDialog.saving" @click="saveUser">
                                <span v-if="editDialog.saving" class="spinner-border spinner-border-sm me-1"></span>
                                保存
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 注册用户弹窗 -->
            <div v-if="registerDialog.visible" class="modal fade show" style="display:block; background: rgba(0,0,0,0.35);">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">注册用户</h5>
                            <button type="button" class="btn-close" @click="closeRegister"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">用户名</label>
                                <input class="form-control" v-model="registerDialog.form.username" placeholder="请输入用户名">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">邮箱</label>
                                <input class="form-control" v-model="registerDialog.form.email" placeholder="请输入邮箱">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">密码</label>
                                <input type="password" class="form-control" v-model="registerDialog.form.password" placeholder="请输入初始密码">
                            </div>
                            <div class="text-danger mt-2" v-if="registerDialog.error">{{ registerDialog.error }}</div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" @click="closeRegister">取消</button>
                            <button type="button" class="btn btn-success" :disabled="registerDialog.saving" @click="saveRegister">
                                <span v-if="registerDialog.saving" class="spinner-border spinner-border-sm me-1"></span>
                                注册
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
      (function(){
        const cdnCandidates = {
          css: [
            // '/css/bootstrap.min.css',
            'https://unpkg.com/bootstrap@5.3.0/dist/css/bootstrap.min.css'
          ],
          vue: [
            // '/libs/vue.global.js',
            'https://unpkg.com/vue@3.2.36/dist/vue.global.js'
          ],
          axios: [
            // '/libs/axios.min.js',
            'https://unpkg.com/axios/dist/axios.min.js'
          ]
        };

        function loadScriptSequential(urls){
          return new Promise((resolve, reject)=>{
            let i=0;
            const tryNext=()=>{
              if(i>=urls.length) return reject(new Error('all failed'));
              const s=document.createElement('script');
              s.src=urls[i++];
              s.onload=()=>resolve();
              s.onerror=()=>{ s.remove(); tryNext(); };
              document.head.appendChild(s);
            };
            tryNext();
          });
        }

        loadScriptSequential(cdnCandidates.vue)
          .then(()=>loadScriptSequential(cdnCandidates.axios))
          .then(()=>{
            const s=document.createElement('script');
            s.src='js/app.js';
            document.head.appendChild(s);
          })
          .catch(()=>{
            const warn=document.createElement('div');
            warn.style.position='fixed';
            warn.style.top='0';
            warn.style.left='0';
            warn.style.right='0';
            warn.style.padding='8px 12px';
            warn.style.background='#fde68a';
            warn.style.color='#7c2d12';
            warn.style.zIndex='9999';
            warn.innerText='前端依赖加载失败：请允许外网访问或在 /static/libs 放置本地 vue.global.js / axios.min.js，并在 /static/css 放置 bootstrap.min.css';
            document.body.appendChild(warn);
          });
      })();
    </script>
</body>
</html>
